<template>
	<view class="contina bBtn_p_b140">
		<view class="w">
			<view class="tip flex_a_c">
				<text style="color:red;margin-right: 10rpx;">*</text>
				<text>反馈类型</text>
			</view>
			<view class="flex_a_c box">
				<template v-for="(item, idx) in list ">
					<view class="item" :class="curr == idx ? 'ac' : ''" @click="change(idx)">{{ item }}</view>
				</template>
			</view>
			<view class="tip flex_a_c" style="margin-bottom: 30rpx;">
				<text style="color:red;margin-right: 10rpx;">*</text>
				<text>具体描述</text>
			</view>
			<u--textarea v-model="form.content" :height="320" count maxlength="255" adjustPosition border="none"
				placeholder="请将您遇到的问题或者建议详细地告诉我们~" autoHeight></u--textarea>

			<view class="par_img">
				<image v-for="(url,idx) in form.images" :src="url" :key="idx"></image>
				<view class="par_upload" @click="upImg">
					<image src="../../static/image/phone.png"></image>
				</view>
			</view>
		</view>
		<flooterCom text="提交" @click="submit"></flooterCom>
	</view>
</template>

<script>
	import flooterCom from "@/compoment/flooterCom.vue"
	export default {
		data() {
			return {
				curr: 0,
				value: "",
				list: ['提出意见', '提交建议', '支付相关问题', '软件故障', '账号相关问题', '其他'],
				form: {
					type: '',
					content: '',
					images: [],
				}
			};
		},
		components: {
			flooterCom
		},
		methods: {
			change(idx) {
				this.curr = idx;
			},
			async submit() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				this.form.type = this.list[this.curr]
				try {
					if (this.edit == 1) {
						await this.$api.corpFeedbackApi.update(this.form)
					} else {
						await this.$api.corpFeedbackApi.add(this.form)
					}
					this.$fun.tipBack('提交成功')
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			upImg() {
				if (this.form.images.length > 1) {
					uni.showToast({
						icon: 'none',
						title: '最多上传3张图片'
					})
					return
				}
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.$fun.uploadImage(tempFilePaths[0]).then(res => {
							console.log()
							this.form.images.push(res.url)
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contina {
		height: 100%;
		background-color: #fff;
		padding-top: 30rpx;

		.tip {
			font-size: 28rpx;
			font-weight: 400;
			color: #000;
		}

		.box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 30rpx;

			.ac {
				background: #0074FF !important;
				color: #fff !important;
			}

			.item {
				width: 216rpx;
				height: 56rpx;
				background: #F6F7FB;
				border-radius: 5px 5px 5px 5px;
				text-align: center;
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
				line-height: 56rpx;
				margin-bottom: 20rpx;
			}
		}

		::v-deep .u-textarea {
			height: 320rpx;
			background-color: #F6F7FB;

			.u-textarea__count {
				background-color: #F6F7FB !important;
			}
		}

		.par_upload {
			width: 200rpx;
			height: 200rpx;
			background-color: #F4F5F7;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx;
			border: 2px dashed #CCCCCC;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.par_img {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			image {
				width: 200rpx;
				height: 200rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>